import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:wanAndroid/bean/top_article_model.dart';
import 'package:wanAndroid/common/uts/ui_uts.dart';
import 'package:wanAndroid/page/page_webview.dart';

class TopArticleItemView extends StatelessWidget {
  final TopArticleData topArticleDatas;

  TopArticleItemView(this.topArticleDatas);

  @override
  Widget build(BuildContext context) => GestureDetector(
        onTap: () {
          PageWebView.start(context, topArticleDatas.link,
              title: topArticleDatas.title);
        },
        child: Container(
          constraints: BoxConstraints(
            minHeight: 50,
            maxWidth: double.infinity,
          ),
          margin: const EdgeInsets.symmetric(vertical: 2),
          padding: const EdgeInsets.only(
            left: 15,
            right: 15,
            top: 10,
            bottom: 0,
          ),
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(
              color: Colors.white,
              width: 1,
            ),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ///标题
              UiUts.getTitle(
                topArticleDatas.title,
                fontSize: 15,
                color: Colors.black,
              ),

              /// 占位···
              UiUts.getDivider(height: 5),

              ///
              Text(
                "分享 | ${topArticleDatas.niceShareDate}",
                style: TextStyle(
                  fontSize: 15,
                  color: Colors.black,
                ),
              ),

              /// 占位···
              UiUts.getDivider(height: 5),

              ///作者
              Text(
                "作者 | ${topArticleDatas.author}",
                style: TextStyle(
                  fontSize: 15,
                  color: Colors.black,
                ),
              ),

              /// 占位符
              UiUts.getDivider(height: 5),

              /// 底部按钮
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                verticalDirection: VerticalDirection.down,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: [
                  /// 收藏
                  Container(
                    margin: const EdgeInsets.only(
                      left: 0,
                      right: 30,
                    ),
                    height: 44,
                    child: Row(
                      children: [
                        Icon(
                          Icons.favorite,
                          size: 15,
                          color: topArticleDatas.collect
                              ? Colors.redAccent
                              : Colors.grey,
                        ),

                        /// 分享
                        Padding(
                          padding: const EdgeInsets.only(
                            left: 5,
                            right: 0,
                          ),
                          child: Text(
                            "收藏",
                            style: TextStyle(
                              fontSize: 12,
                              color: Colors.grey,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),

                  ///分享
                  Container(
                    margin: const EdgeInsets.only(
                      left: 0,
                      right: 30,
                    ),
                    height: 44,
                    child: Row(
                      children: [
                        Icon(
                          Icons.share_sharp,
                          size: 18,
                          color: Colors.grey,
                        ),
                        Padding(
                          padding: const EdgeInsets.only(
                            left: 5,
                            right: 0,
                          ),
                          child: Text(
                            "分享",
                            style: TextStyle(
                              fontSize: 12,
                              color: Colors.grey,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),

                  ///
                  Container(
                    margin: const EdgeInsets.only(
                      left: 0,
                      right: 0,
                    ),
                    height: 44,
                    child: Row(
                      children: [
                        Icon(
                          Icons.thumb_up,
                          color: topArticleDatas.zan > 0
                              ? Colors.redAccent
                              : Colors.grey,
                          size: 18,
                        ),
                        Padding(
                          padding: const EdgeInsets.only(
                            left: 0,
                            right: 10,
                          ),
                          child: Text.rich(
                            TextSpan(
                              text: null,
                              style: TextStyle(
                                fontSize: 12,
                                color: Colors.black,
                              ),
                              children: [
                                TextSpan(
                                  text: "\t${topArticleDatas.zan}\t",
                                  style: TextStyle(
                                    fontSize: 18,
                                    color: topArticleDatas.zan > 0
                                        ? Colors.redAccent
                                        : Colors.grey,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      );
}
